<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="100px" label-suffix=":" class="prod-form-class">
            <el-form-item label="产品名称" prop="product_name">
                <el-input v-model.trim="model.product_name" placeholder="请输入产品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="产品spu" prop="spu">
                <el-input v-model.trim="model.spu" placeholder="请输入产品spu" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="安全库存" prop="safe_quantity">
                <el-input-number v-model.trim="model.safe_quantity" :controls="false" :min="0" :step="1" placeholder="请输入安全库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="在途库存" prop="on_way_quantity">
                <el-input-number v-model.trim="model.on_way_quantity" :controls="false" :min="0" :step="1" placeholder="请输入在途库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="未发数量" prop="not_send_quantity">
                <el-input-number v-model.trim="model.not_send_quantity" :controls="false" :min="0" :step="1" placeholder="请输入未发数量" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="占用库存" prop="using_quantity">
                <el-input-number v-model.trim="model.using_quantity" :controls="false" :min="0" :step="1" placeholder="请输入占用库存" clearable></el-input-number>
            </el-form-item>
            <el-form-item label="可用库存" prop="inventory_quantity">
                <el-input-number v-model.trim="model.inventory_quantity" :controls="false" :min="0" :step="1" placeholder="请输入可用库存" clearable></el-input-number>
            </el-form-item> -->
            <el-form-item label="总库存" prop="all_inventory_quantity">
                <el-input-number v-model.trim="model.all_inventory_quantity" :controls="false" :min="0" :step="1" placeholder="请输入总库存" clearable></el-input-number>
            </el-form-item>

            <!-- <el-form-item label="货架位" prop="warehouse_position">
               <el-select v-model="model.warehouse_position" placeholder="请选择货架位" clearable style="width: 240px">
                  <el-option
                      v-for="item in dict.goodsshelvesList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  ></el-option>
               </el-select>
          </el-form-item> -->
          <el-form-item label="备注" prop="remark" class="full">
              <el-input v-model.trim="model.remark" type="textarea" :rows="4" placeholder="请填写您要备注的内容（最多200字符）" :maxlength="200" show-word-limit clearable ></el-input>
          </el-form-item>
            <el-form-item label="图片" prop="product_images" class="full">
                <ImageUploadMultiple v-model="model.product_images" :limit="1" :multiple="false"></ImageUploadMultiple>
            </el-form-item>

        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="save" :disabled="save" @click="submit">确认</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
    </el-dialog>
</template>

<script>
import { detailedListInfoDetail, detailedListInfoEdit } from '@/api/warehouse'
import { getGoodsshelvesList} from '@/api/warehouse'
export default {
  name: 'DetailedListInfoDetailDialog',
  components: {},
  props: {
      value: {
          type: Boolean,
          default: false,
          required: true,
      },
      params: {
          type: Object,
          default: () => {},
      },
  },
  data() {
      return {
          loading: false,
          save: false,
          model: {
              id: undefined,
              warehouse: undefined,
              warehouse_position: undefined,
              create_time: undefined,
              update_time: undefined,
          },
          rules: {},
          dict: {
            goodsshelvesList: []
          }
      }
  },
  computed: {
      title() {
          return `编辑货架位`
      },
      isEdit() {
          return !!this.params.id
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: {
      params: {
          handler(val) {
              if (val.id) {
                  this.getDetail()
              }
          },
          immediate: true,
          deep: true,
      },
  },
  async mounted() {
      this.loading = true
      try {
          const goodsshelvesData = await getGoodsshelvesList()
          this.dict.goodsshelvesList = goodsshelvesData?.data?.list ?? []
      } catch (error) {
          this.loading = false
      }
  },
  methods: {
    resetSort() {
            this.queryParams.safe_quantity = undefined
            this.queryParams.on_way_quantity = undefined
            this.queryParams.not_send_quantity = undefined
            this.queryParams.using_quantity = undefined
            this.queryParams.inventory_quantity = undefined
            this.queryParams.all_inventory_quantity = undefined
        },
        handleSortChange({ column, prop, order }) {
            this.resetSort()
            this.queryParams[prop] = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : undefined
            this.getList()
        },
      getDetail() {
          this.loading = true
          const params = { id: this.params.id }
          detailedListInfoDetail(params)
              .then(res => {
                  this.model = Object.assign({}, this.model, res.data)
              })
              .finally(() => {
                  this.loading = false
              })
      },
      submit() {
          this.$refs.form.validate(valid => {
              if (!valid) {
                  return
              }
              const params = { ...this.model }
              if (this.save) {
                  return
              }
              this.save = true
              // if (this.isEdit) {
                  detailedListInfoEdit(params)
                      .then(res => {
                          this.$message.success(res.msg)
                          this.dialogVisible = false
                          this.$emit('success')
                      })
                      .finally(() => {
                          this.save = false
                      })
              // } else {
              //     detailedAdd(params)
              //         .then(res => {
              //             this.$message.success(res.msg)
              //             this.dialogVisible = false
              //             this.$emit('success')
              //         })
              //         .finally(() => {
              //             this.save = false
              //         })
              // }
          })
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style>
.prod-form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.prod-form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w750 {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.w750 .el-input {
    width: 780px;
}
.prod-form-class.el-form .el-form-item .el-textarea {
    width: 780px;
}
.prod-form-class.el-form .el-form-item.full {
    width: 100%;
}
.prod-form-class.el-form .el-form-item.full .el-input,
.prod-form-class.el-form .el-form-item.full .el-cascader {
    width: 770px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 + .el-input-number {
    margin-left: 10px;
}
.prod-form-class.el-form .el-form-item .el-input-number,
.prod-form-class.el-form .el-form-item .el-input-number .el-input {
    width: 250px;
}
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120,
.prod-form-class.el-form .el-form-item.w120 .el-input-number.w120 .el-input {
    width: 120px;
}
.prod-form-class.el-form .el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}
.custom-select .el-select-dropdown__item {
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}</style>
